<template>
    <el-tabs v-model="activeName" class="tabs" type="border-card">
        <el-tab-pane name="room" label="会议室管理"><Room /></el-tab-pane>
        <el-tab-pane name="car" label="班车管理"><Car /></el-tab-pane>
        <el-tab-pane name="activity" label="活动管理"><Activity /></el-tab-pane>
        <el-tab-pane name="order" label="订水订餐管理"><Order /></el-tab-pane>
    </el-tabs>
</template>

<script setup>
    import { ref,getCurrentInstance,onActivated } from 'vue'
    import Activity from './activity.vue'
    import Order from './order.vue'
    import Car from './car.vue'
    import Room from "./room.vue"
    let { proxy } = getCurrentInstance()

    let activeName = ref('room')
    onActivated((e)=>{
        activeName.value = proxy.$route.query.tabname||'room'
    })
</script>

<style lang="scss" scoped>
    .tabs {
         display: flex; flex-direction: column; height: 100%; box-shadow: none; border-radius: 5px; border: 0; 
    }
    .tab { height: 100%; }
</style>